<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>活动图模块</title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		section #event{
			width: 1140px;
			height: 220px;
			background: #000;
			margin: 0 auto;
		}
		section #event ul li{
			float: left;
			margin-top: 10px;
			margin-left: 25px;
		}
		section #event ul li img{
			width: 266px;
			height: 200px;
		}
		/* 去掉左侧围 外边距：0 */
		section #event ul li:first-child{
			bor der: 1px solid red;
			margin-left: 0;
		}
		/* 移动上面改变效果：下阴影 */
		section #event ul li:hover{
			filter: drop-shadow(0 0 8px #dbdbdb);
		}
	</style>
	<body>
		<!-- section结构化元素：页面区域分化、文章分节，章节划分 
		活动图中控区-->
		<section>
			<div id="event">
				<ul>
					<li><img src="../img/left.png" alt=""></li>
					<li><img src="../img/subnav_icon01.png" alt=""></li>
					<li><img src="../img/subnav_icon02.jpg" alt=""></li>
					<li><img src="../img/subnav_icon03.png" alt=""></li>
				</ul>
			</div>
		</section>
	</body>
</html>